<template>
	<view style="width: 100%;height: 100vh;display: flex;flex-direction: column;justify-content: space-between;">
		<view style="padding: 0 20rpx;">
			<view class="cell">
				<view class="cell-item" style="width: 100%;">
					<text>条码:</text>
					<input type="text" :disabled="true" v-model="tm" />
				</view>
			</view>
			<view class="cell">
				<view class="cell-item">
					<text>货号:</text>
					<input type="text" :disabled="true" v-model="bbreed" />
				</view>
				<view class="cell-item">
					<text>颜色:</text>
					<input type="text" :disabled="true" v-model="color" />
				</view>
			</view>
			<view class="cell">
				<view class="cell-item">
					<text>尺码:</text>
					<input type="text" :disabled="true" v-model="chima" />
				</view>
				<view class="cell-item">
					<text>数量:</text>
					<input type="number" v-model="sl" />
				</view>
			</view>
			<view style="margin: auto;width: 90%;">
				<button size="mini" type="primary" :disabled="saveFlag"  style="color: #fff;width: 100%;height: 80rpx;line-height: 80rpx;" @tap="save">确定</button>
			</view>
		</view>
		<view class="btminfo" style="overflow: auto;flex: 1;">
			<t-table style='width: 100%;z-index: 10;'>
				<t-tr>
					<t-td style="flex: 0 0 120upx;word-break: break-word;">货号</t-td>
					<t-td style="flex: 0 0 120upx;word-break: break-word;">颜色</t-td>
					<t-td style="flex: 0 0 120upx;word-break: break-word;">尺码</t-td>
					<t-td style="flex: 0 0 100upx;word-break: break-word;">数量</t-td>
					<t-td style="flex: 1;word-break: break-word;">条码</t-td>
				</t-tr>
				<t-tr v-for="(item,index) in arr" :key="index">
					<t-td style="flex: 0 0 120upx;word-break: break-word;">{{item.bbreed}}</t-td>
					<t-td style="flex: 0 0 120upx;word-break: break-word;">{{item.color}}</t-td>
					<t-td style="flex: 0 0 120upx;word-break: break-word;">{{item.chima}}</t-td>
					<t-td style="flex: 0 0 100upx;word-break: break-word;">{{item.sl}}</t-td>
					<t-td style="flex: 1;word-break: break-word;">{{item.barcode}}</t-td>
				</t-tr>
			</t-table>
		</view>
		<view style="text-align: center;color: #f0301f;font-size: 40upx;height: 80rpx;border-top: 1px solid #ccc;line-height: 80rpx;">
			<!-- <view style="text-align: center;color: #f0301f;font-size: 40upx;"> -->
				已扫描{{sum}}个条码
			<!-- </view> -->
		</view>
		<scanCode></scanCode>
	</view>
</template>


<script>
	import scanCode from '@/static/scan-code/scan-code.vue';
	// import Voice from '@/static/voice.js'; //语音文件
	import axios from '@/static/axios.js';
	import tTable from '@/static/t-table/t-table.vue'
	import tTh from '@/static/t-table/t-th.vue'
	import tTr from '@/static/t-table/t-tr.vue'
	import tTd from '@/static/t-table/t-td.vue'
	const TTSSpeech = uni.requireNativePlugin("MT-TTS-Speech");
	var app = getApp();
	export default {
		components: {
			scanCode,
			tTable,
			tTh,
			tTr,
			tTd
		},
		data() {
			return {
				tm: '',
				num: 0,
				arr: [],
				sl: '',
				color: '',
				chima: '',
				bbreed: '',
				url: '',
				chuanghao: '',
				jhh: '',
				jhhArr: [],
				uid: '',
				uname: '',
				temp: [],
				saveFlag:false
			}
		},
		onLoad() {
			
			this.url = uni.getStorageSync('url') == '' ? this.websiteUrl : uni.getStorageSync('url')
			this.uid = uni.getStorageSync('uid')
			this.uname = uni.getStorageSync('uname')
			TTSSpeech.init((status) => {
				if (status === 0) {
					// console.log('引擎初始化成功')
				}
			}, 'com.iflytek.speechcloud')
			var _this = this
			uni.$off('scancodedate')
			uni.$on('scancodedate', function(content) {
				// if (_this.tm != content) {
				console.log(content, 'content')
				if (_this.arr.some(item =>item.barcode == content)) {
					uni.showToast({
						title: '此条码已扫描!',
						icon: 'none',
						duration: 3000
					})
					TTSSpeech.speak({
						text: '此条码已扫描'
					})
					return
				}
				uni.request({
					url: `http://${_this.url}/bService.asmx/GetCpzxdBarcode`,
					method: 'GET',
					dataType: 'json',
					data: {
						barcode: content
					},
					success: (r) => {
						console.log(r);
						if (r.data.code == 200) {
							
							let temp = r.data.data[0]
							_this.tm = temp.barcode
							_this.sl = temp.sl
							_this.bbreed = temp.bbreed
							_this.color = temp.color
							_this.chima = temp.chima
							uni.showToast({
								title: r.data.msg,
								icon: 'none',
								duration: 3000
							})
							TTSSpeech.speak({
								text: r.data.msg,
							})
						} else {
							uni.showToast({
								title: r.data.msg,
								icon: 'none',
								duration: 3000
							})
							TTSSpeech.speak({
								text: r.data.msg,
							})
						}
					},
					complete: (r) => {
						console.log(r.statusCode != 200)
						if (r.statusCode != 200) {
							uni.showToast({
								title: '网络请求失败!',
								icon: 'none',
								duration: 3000
							})
						}
					}
				})
			})

		},
		computed: {
			sum() {
				return this.arr.length
			}
		},
		methods: {
			save(){
				if(this.tm == ''){
					uni.showToast({
						title: '请先扫条码',
						icon: 'none',
						duration: 3000
					})
					TTSSpeech.speak({
						text: '请先扫条码'
					})
					return
				}
				uni.request({
					url: `http://${this.url}/bService.asmx/CpzxdBarcode_pd`,
					method: 'GET',
					dataType: 'json',
					data: {
						barcode: this.tm,
						username:this.uid,
						sl:this.sl
					},
					success: (r) => {
						console.log(r);
						if(r.data.code == 200){
							let temp = r.data.data[0]
							this.arr.push({
								bbreed:temp.bbreed,
								color:temp.color,
								chima:temp.chima,
								sl:temp.sl,
								barcode:temp.barcode
							})
							this.tm = ''
							this.bbreed = ''
							this.color = ''
							this.chima = ''
							this.sl = ''
						}
						uni.showToast({
							title: r.data.msg,
							icon: 'none',
							duration: 3000
						})
						TTSSpeech.speak({
							text: r.data.msg,
						})
					},
					complete: (r) => {
						if (r.statusCode != 200) {
							uni.showToast({
								title: '网络请求失败!',
								icon: 'none',
								duration: 3000
							})
						}
						this.saveFlag = false
					}
				})
			}
		}
	}
</script>

<style>
	.cell{display: flex;align-items: center;width: 100%;padding: 20rpx 0;}
	.cell-item{display: flex;align-items: center;width: 50%;}
	.cell-item text {width: 120rpx;}
	.cell-item input {border: 1px solid #ccc;width: 60%;}
</style>